import React, {Component} from 'react';
import {List, Tabs} from 'antd';
import {
    apiGetAuthGetIndexAllBacklog,
    apiGetAuthGetIndexStockWarningList,
    apiGetAuthGetIndexMemberWithdrawList,
    apiGetAuthGetIndexOrderList,
    apiGetAuthGetIndexReturnOrderList,
    apiGetAuthGetIndexCooperateList,
    apiGetAuthGetIndexMemberFeedbackList,
    apiGetAuthGetIndexMemberComplaintList
} from '@/request/system/home'
import '../../style/style.less'
import ThePagination from "../../../../components/ThePagination";
import {render} from "@testing-library/react";

const {TabPane} = Tabs

class ToDoList extends Component {
    state = {
        tabKey: 0,
        pageParams0: {
            pageNo: 1,
            pageSize: 5,
            total: 1
        },
        pageParams1: {
            pageNo: 1,
            pageSize: 5,
            total: 1
        },
        pageParams2: {
            pageNo: 1,
            pageSize: 5,
            total: 1
        },
        pageParams3: {
            pageNo: 1,
            pageSize: 5,
            total: 1
        },
        pageParams4: {
            pageNo: 1,
            pageSize: 5,
            total: 1
        },
        pageParams5: {
            pageNo: 1,
            pageSize: 5,
            total: 1
        },
        pageParams6: {
            pageNo: 1,
            pageSize: 5,
            total: 1
        },
        pageParams7: {
            pageNo: 1,
            pageSize: 5,
            total: 1
        },
        dataSource: null
    }

    async componentDidMount() {
        await this.getData()
    }

    getData = async () => {
        const {dateType} = this.props
        const {tabKey} = this.state
        const params = {
            pageNo: this.state[`pageParams${tabKey}`].pageNo,
            pageSize: this.state[`pageParams${tabKey}`].pageSize,
            dateType: dateType
        }
        let response = {}
        switch (tabKey) {
            case 0:
                response = await apiGetAuthGetIndexAllBacklog(params)
                break;
            case 1:
                response = await apiGetAuthGetIndexStockWarningList(params)
                break;
            case 2:
                response = await apiGetAuthGetIndexMemberWithdrawList(params)
                break;
            case 3:
                response = await apiGetAuthGetIndexOrderList(params)
                break;
            case 4:
                response = await apiGetAuthGetIndexReturnOrderList(params)
                break;
            case 5:
                response = await apiGetAuthGetIndexCooperateList(params)
                break;
            case 6:
                response = await apiGetAuthGetIndexMemberFeedbackList(params)
                break;
            case 7:
                response = await apiGetAuthGetIndexMemberComplaintList(params)
                break;
        }
        if (response.code === 0) {
            const dataSource = response.data
            const total = response.totalCount
            this.setState({
                dataSource,
                [`pageParams${tabKey}`]: {
                    ...this.state[`pageParams${tabKey}`],
                    total
                }
            })
        }
    }
    tabChange = key => {
        this.setState({
            tabKey: key * 1,
            dataSource: null
        }, () => this.getData())
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            [`pageParams${this.state.tabKey}`]: {
                ...this.state[`pageParams${this.state.tabKey}`],
                pageSize,
                pageNo
            }
        }, () => this.getData())
    }

    render() {
        const {dataSource} = this.state
        const tabArr = ['全部事项', '库存预警', '财务表现', '订单处理', '售后处理', '店招合作', '用户反馈', '商户投诉']
        return (
            <div className={'to-do-list'}>
                <h1>待办事项</h1>
                <Tabs onChange={this.tabChange}>
                    {
                        tabArr.map((v, i) => {
                            return <TabPane tab={v} key={i}>
                                {
                                    dataSource && dataSource[0] && dataSource[0].count && <div className={'tab-header'}>
                                        {
                                            dataSource[0].count.map(v => {
                                                return <div>
                                                    <span className={'tab-header-key'}>{v.key}</span>
                                                    <span className={'tab-header-value'}>{v.value}</span>
                                                </div>
                                            })
                                        }
                                    </div>
                                }
                                {dataSource && <>
                                    <List dataSource={dataSource}
                                          renderItem={item => {
                                              return <List.Item>
                                                  <div>
                                                      <span>{item.title}</span>
                                                      <span>{item.name}</span>
                                                  </div>
                                                  <span>{item.date && item.date.replace('T', ' ')}</span>
                                              </List.Item>
                                          }}
                                    />
                                    <ThePagination
                                        pageChange={this.pageChange}
                                        total={this.state[`pageParams${this.state.tabKey}`].total}
                                        pageNo={this.state[`pageParams${this.state.tabKey}`].pageNo}
                                        pageSize={this.state[`pageParams${this.state.tabKey}`].pageSize}/>
                                </>}
                            </TabPane>
                        })
                    }
                </Tabs>
            </div>
        );
    }
}


export default ToDoList;